define(function(){
  var cjx = function(){
    $.getJSON('data/category.json',function(responseText, responseState, responseObj){
      // console.log(responseText);
      var categoriesArr = responseText.data.categories;
      var productsObj = responseText.data.products;
      var str1="",str2="",str11="";
      var arr = [];
      for(var i in categoriesArr){
        var str21="";
        str11 += '<li><span>' + categoriesArr[i].name + '</span></li>';
        var categoriesCidsArr = categoriesArr[i].cids;
        for(var j in categoriesCidsArr){
          str21 += '<p>' + categoriesCidsArr[j].name + '</p>';
        }
        str2 += '<div class="hidden">' + str21  + '</div>';
        var id = categoriesArr[i].id;
        arr.push(id);
      }
      str1 += '<ul>' + str11 + '</ul>';
      $("#nav").html(str1);
      $("#showOrHidden").html(str2);
      // 解析具体的商品
      var str3="";
      for(var num of arr){
        var str31="";
        var productsArr = productsObj[num];
        for(var j in productsArr){
          var str32="",str33="",str34="";
          if(productsArr[j].d_price==undefined){
            str32 +='<span class="oldprice"></span>';
          }else{
            str32 +='<span class="oldprice">￥' + productsArr[j].d_price + '</span>';
          }
          if(productsArr[j].org_source_value==1){
            str33 += '<p class="p">精选</p>';
          }else if(productsArr[j].org_source_value==2){
            str33 += '<p class="pp"></p>';
          }
          if(productsArr[j].pm_desc==""){
            str34 += '<div class="you"></div>';
          }else{
            str34 += '<div class="youhui">' +  productsArr[j].pm_desc  + '</div>';
          }
          str31 += '<div class="div">' +
              				'<img src=' + productsArr[j].img  + ' alt="">'+
                      '<div class="text">'+
                        '<p class="title">' + productsArr[j].name  + '</p>'+
                				str33 + str34 +
                				'<span class="mass">' + productsArr[j].specifics  + '</span>'+
                				'<span class="price">' + productsArr[j].price   + '</span>'+
                				str32 +
                        '<div class="reduce">-</div>'+
                        '<div class="n">0</div>'+
                				'<div class="add">+</div>'+
                      '</div>'+
              			'</div>'
        }
        str3 += '<div class="divs">' + str31 + '</div>';
      }
      $("#divwrap").html(str3);

      // 点击效果
      var $itemwrap = $("#itemwrap");
      var $navli = $("#nav li");
      var $div = $(".divs");
      var $span = $("#nav span");
      var $select1 = $(".select1");
      var $select2 = $(".select2");
      var $showOrHidden = $("#showOrHidden");
      var $hidden = $(".hidden");
      $($div[0]).css("display","block");
      for(var i=0;i<$navli.length;i++){
        (function(num){
          // 点击左侧导航
          $($navli[num]).click(function(){
            // 点击左侧导航时，让模态窗口隐藏
            $showOrHidden.css("display","none");
            for(var j=0;j<$navli.length;j++){
              $($hidden[j]).css("display","none");
            };
            // 点击左侧导航时，遍历让所有的内容对应的div隐藏，移出所有span标签的样式
            for(var j=0;j<$navli.length;j++){
              $($div[j]).css("display","none");
              $($span[j]).removeAttr("class","spans");
            }
            // 点击左侧导航时，显示对应的内容及给对应的span标签添加样式
            $itemwrap.scrollTop(0);
            $($span[num]).attr("class","spans");
            $($div[num]).css("display","block");

            // 点击全部分类按钮
            $select1.click(function(){
              // 每次点击时判断模态窗口的显示状态
              if($showOrHidden.css("display")=='block'){
                // 隐藏模态窗口
                $showOrHidden.css("display","none");
                for(var j=0;j<$navli.length;j++){
                  $($hidden[j]).css("display","none");
                };
              }else{
                // 显示模态窗口
                $showOrHidden.css("display","block");
                for(var j=0;j<$navli.length;j++){
                  $($hidden[j]).css("display","none");
                };
                $($hidden[num]).css("display","block");

                // 点击白色区域模态窗口隐藏
                $hidden.click(function(){
                  $showOrHidden.css("display","none");
                });
                // 点击灰色区域模态窗口隐藏
                $showOrHidden.click(function(){
                  $showOrHidden.css("display","none");
                });
              };
            });
          });
        })(i);
      };
      // 点击加号效果
      var $add = $(".add");
      var $reduce = $(".reduce");
      var $n = $(".n");
      var $show = $(".show");
      for(var i=0;i<$add.length;i++){
        (function(num){
          $($add[num]).click(function(){
            // 购物车旁边的小图片出现并且数量加一
            $show.css("display","block");
            var nums = parseInt($show.html());
            $show.html(nums + 1);
            // 点击添加后对应的减号出现，对应的数量加一
            $($reduce[num]).css("display","block");
            $($n[num]).css("display","block");
            var numss = parseInt($($n[num]).html());
            $($n[num]).html(numss + 1);
          });
          // 点击减号减少数量
          $($reduce[num]).click(function(){
            var numss = parseInt($($n[num]).html());
            if(numss-1<=0){
              $($reduce[num]).css("display","none");
              $($n[num]).css("display","none");
              $($n[num]).html(0);
              var nums = parseInt($show.html());
              if(nums-1<=0){
                $show.html(0);
                $show.css("display","none");
              }else{
                $show.html(nums - 1);
                $show.css("display","block");
              }
            }else{
              $($n[num]).html(numss - 1);
              var nums = parseInt($show.html());
              if(nums-1<=0){
                $show.css("display","none");
              }else{
                $show.html(nums - 1);
                $show.css("display","block");
              }
            }
          });
        })(i);
      }
    });
  }
  return{
    cjx:cjx
  }
})
